<template>
    <div class="echarts">
        <el-radio-group v-model="beforeKey" style="margin-bottom: 20px" size="large">
            <el-radio-button label="sale_">销量</el-radio-button>
            <el-radio-button label="_money">销售额</el-radio-button>
        </el-radio-group>
        <el-select v-model="selectActive" class="m-2" placeholder="Select" size="large">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
    </div>

    <div id="main" style="height:400px;"></div>
</template>

<script setup lang='ts'>
import * as echarts from 'echarts';
import { onMounted, ref, watch, nextTick } from 'vue';
import { admin } from '@/request/api';
import type { IEchartsItem } from '@/request/UmsAdminController/index'
import type { EChartsType } from 'echarts';
const beforeKey = ref('sale_')
const selectActive = ref('yesterday')


let myChart: EChartsType;
const options = [
    {
        value: 'yesterday',
        label: '昨天',
    },
    {
        value: 'today',
        label: '今天',
    },
    {
        value: 'three_days',
        label: '前三天',
    },
    {
        value: 'seven_days',
        label: '前七天',
    },
    {
        value: 'fourteen_days',
        label: '前十四天',
    },
]

nextTick(() => {
    let chartDom = document.getElementById('main');
    if (!myChart) {
        myChart = echarts.init(chartDom!);
    }
    // 响应容器大小的变化
    window.onresize = function () {
        myChart.resize();
    };
})

async function getEcharts() {
    let EchartsData = await admin.getEchartsData();
    let salePie = EchartsData.salePie;
    let key = beforeKey.value === 'sale_' ? (beforeKey.value + selectActive.value) : (selectActive.value + beforeKey.value)
    console.log(key);
    let newSalePie = salePie.map((item: IEchartsItem) => {

        return {
            value: parseFloat(item[key]),
            name: item.name
        }
    })

    let option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: "vertical",
            right: 10,
            top: 20,
            width: 300,
            height: 100,
            textStyle: {
                width: 40
            },
            tooltip: {
                show: !1
            }
        },
        calculable: true,
        series: [
            {
                name: '分类：',
                type: 'pie',
                radius: ['40%', '70%'], //设置圆心
                center: ['30%', '55%'],
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2,
                },
                data: newSalePie,

            }
        ]
    };

    option && myChart.setOption(option);
}


watch([beforeKey, selectActive], (newVal) => {
    getEcharts();
})

onMounted(() => {
    getEcharts();
})

</script>
 
<style lang = "scss" scoped>
.echarts {
    padding: 20px 40px 0px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
}
</style>